<style lang="scss" scoped>
.company {
  .btn {
    margin-left: 140px;
  }
  .pdf-btn {
    margin: -14px 0 0 14px;
  }
}
</style>
<template>
  <div class="company">
    <!-- 预览 -->
    <pdf-com
      :src="pdfSrc"
      title="pdf"
      :visibleProp="pdfVisible"
      @close="pdfVisible = false"
      v-if="pdfSrc"
    />
    <!-- 查询 -->
    <el-form
      ref="form"
      :model="form"
      label-width="165px"
      class="query-form"
    >
      <el-row>
        <el-form-item label="货代">
          <el-input v-model="form.goodsProxy"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="接货人">
          <el-input v-model="form.goodsReceiver"></el-input>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-tag type="success">
          <i class="el-icon-right" />
          客户单位
        </el-tag>
        <el-form-item label="客户单位" label-width="80px">
          <el-input v-model="form.customerlist"></el-input>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-tag type="success">
          <i class="el-icon-right" />
          发货单位
        </el-tag>
        <el-form-item label="发货单位" label-width="80px">
          <el-input v-model="form.deliverCompanyName"></el-input>
        </el-form-item>
        <span class="ml_10" @click="editVisible=true"><el-button flex-box="0" icon="el-icon-edit" circle /></span>
      </el-row>
      <el-row type="flex">
        <el-tag type="success">
          <i class="el-icon-right" />
          收货单位
        </el-tag>
        <el-form-item label="收货单位" label-width="80px">
          <el-input v-model="form.receiveCompanyName"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="企业编码">
          <el-input v-model="form.receiveCompanyOrgCode"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="地址">
          <el-input v-model="form.receiveCompanyAddress"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="选择联系人">
          <el-input v-model="form.receiveCompanyContactsName"></el-input>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-tag type="success">
          <i class="el-icon-right" />
          消费单位
        </el-tag>
        <el-form-item label="消费单位" label-width="80px">
          <el-input v-model="form.consumeCompanyName"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="企业编码">
          <el-input v-model="form.consumeCompanyOrgCode"></el-input>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-tag type="success">
          <i class="el-icon-right" />
          申报单位
        </el-tag>
        <el-form-item label="申报单位" label-width="80px">
          <el-input v-model="form.declareCompanyName"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="企业编码">
          <el-input v-model="form.declareCompanyOrgCode"></el-input>
        </el-form-item>
      </el-row>
      <el-row class="btn">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button @click="onSave">下一步</el-button>
      </el-row>
    </el-form>
    <!-- 编辑 -->
    <edit-tab
      :visibleProp="editVisible"
      title="编辑客户"
      @close="editVisible = false"
    >
      <template #baseInfo>
        <el-form
          ref="editForm"
          :model="editForm"
          label-width="90px"
          style="width: 400px"
        >
          <el-form-item
            label="名字"
            prop="startShipmentCountry"
            :rules="{
              required: true,
              message: '请输入名字',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="editForm.startShipmentCountry"
              placeholder="请输入企业/个人名字"
            />
          </el-form-item>
          <el-form-item label="英文名">
            <el-input
              v-model="editForm.destCountry"
              placeholder="请输入企业/个人英文名"
            />
          </el-form-item>
          <el-form-item label="简称">
            <el-input
              v-model="editForm.tradeCountry"
              placeholder="请输入企业/个人简称"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="editForm.ladingNo"
              placeholder="请输入备注"
            />
          </el-form-item>
          <el-form-item label="是否常用" prop="cabinetNo">
            <el-radio-group v-model="editForm.ladingNo">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
    </edit-tab>
  </div>
</template>

<script>
import EditTab from '../cms/EditTab.vue'
import PdfCom from '@/components/PdfCom.vue'

export default {
  name: 'Company',
  components: {
    PdfCom,
    EditTab
  },
  data() {
    return {
      form: {
        goodsProxy: '',
        goodsReceiver: '',
        customerlist: '',
        deliverCompanyName: '',
        cabinetNo: '',
        receiveCompanyOrgCode: '',
        receiveCompanyAddress: ''
      },
      editForm: {
        startShipmentCountry: '',
        destCountry: '',
        tradeCountry: '',
        ladingNo: '',
        cabinetNo: '',
        sealNo: '',
        declarationNo: '',
        tariffNo: '',
        declareDate: '',
        vatNo: ''
      },
      pdfSrc: '',
      pdfVisible: false,
      editVisible: false
    }
  },
  methods: {
    showPdf(src) {
      this.pdfSrc = src || '/20220730152312935163.pdf'
      if (this.pdfSrc) this.pdfVisible = true
    },
    onSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const { code } = await this.$axios.post('/order/saveOrderCustomerInfo', this.form)
          if (code === '000000') {
            this.$message('修改成功！')
          }
        }
      })
    }
  },
  async created() {
    const { data } = await this.$axios.post('/order/queryOrderCustomerInfo', {
      cabinetNo: this.$route.query.id
    })
    console.log(data)
    this.form = data || {}
  }
}
</script>
